<!-- 数据权限管理 -->
<template>
	<div class="dataManage">
		<div class="top">
			<el-form ref="form" :model="form" label-width="120px">
				<el-row>
					<el-col :span="8">
						<el-form-item label="姓名">
							<el-input v-model.trim="form.name" @keyup.enter.native="search" @change="resetPage"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="登录名">
							<el-input v-model.trim="form.name" @keyup.enter.native="search" @change="resetPage"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<div class="btndiv">
							<el-button v-blur class="query" @click="search">查询</el-button>
							<el-button v-blur class="reset" @click="reset">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<div class="tableDiv">
			<el-table stripe :data="tableData" style="border-radius: 6px" :header-cell-style="{color:'#333333',fontFamily:'PingFang SC',fontSize:'14px',fontWeight:500,background: '#F4F8FF',
			borderBottom: '1px solid #B9DAF2'}">
				<el-table-column prop="orderNo" label="序号" width='55px'></el-table-column>
				<el-table-column prop="name" label="姓名"></el-table-column>
				<el-table-column prop="loginName" label="登录名"></el-table-column>
				<el-table-column prop="operation" label="操作">
					<template slot-scope="scope">
						<el-button v-blur size="mini" type="primary" plain @click="handleSetup(scope.$index, scope.row,$event)">
							设置
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="pagediv">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="pageNum" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="recordsFiltered">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import '@/assets/queryPublic.css'
	export default {
		name: 'dataManage',
		data() {
			return {
				pageNum: 1,
				pageSize:10,
				recordsFiltered: 0,
				tableData: [{
					orderNo: 1,
					name: '中国国际金融股份有限公司',
					loginName: '11108406',
				},{
					orderNo: 1,
					name: '恒泰证券股份有限公司',
					loginName: '11500801',
				}],
				value2: '',
				form: {
					name: ''
				},
				options: [],
				value: ''

			}
		},
		mounted() {

		},
		methods: {
			resetPage() {
				this.pageNum = 1;
			},
			search() {
			
			},
			reset() {
				this.pageNum=1;
			},
			add() {
				this.$router.push('/newlyReward');
			},
			handleSetup(i, r, e) {
				this.$router.push('/dataManageSet')
			},
			handleSizeChange(val) {
				this.pageSize=val
			},
			handleCurrentChange(val) {
				this.pageNum = val
			},
		}
	}
</script>

<style scoped lang='scss'>
	.top {
		min-height: 40px;
		background: #F4F8FF;
		border: 1px solid #B9DAF2;
		border-radius: 8px;
		padding: 16px 22px 16px 0;
		;
	}

	.tableDiv {
		background: #FFFFFF;
		border: 1px solid #B9DAF2;
		border-radius: 6px;
		margin-top: 20px;
	}

	/deep/.query,
	.reset,
	.added {
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		vertical-align: middle;
		line-height: 3px;
		width: 70px;
		height: 28px;
		background: linear-gradient(270deg, #3D80FF, #3DAFFF);
		border-radius: 5px;
	}

	.reset {
		background: linear-gradient(270deg, #C7CBCC, #ADAFB1);
	}

	.added {
		background: linear-gradient(270deg, #0BC6AA, #13E8CC);
	}

	.btndiv {
		margin-top: 6px;
		text-align: right;
	}

	.flexDiv {
		display: flex;
		flex-direction: row-reverse;
	}

	.export {
		margin: 21px 0px 11px 0;
		width: 107px;
		height: 30px;
		border: 1px solid #3D80FF;
		border-radius: 6px;
		font-size: 15px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #3D80FF;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer
	}

	.pagediv {
		float: right;
		margin-top: 19px;
	}
</style>
